<script setup lang="ts">
import { resetRouter } from '@/router'
import { SESSION } from '@/utils/storage'

const router = useRouter()

const form = ref({
  user_id: '',
  medical_record_number: '',
  name: '',
  gender: '',
  dominant_hand: '',
  diagnosis: '',
  dob: '',
  height_cm: '',
  contact: '',
  weight_kg: '',
  education_level: '',
  remarks: '',
})

const setFormData = () => {
  let userInfo: Record<string, string>
  try {
    userInfo = SESSION.get('user_info') || {}
    Object.keys(form.value).forEach((key) => {
      form.value[key as keyof typeof form.value] = userInfo[key] || ''
    })
  } catch (error: any) {
    console.error('解析用户信息失败:', error)
  }
}

const handleBack = () => {
  SESSION.clear()
  resetRouter()
  router.push('/login')
}

const handleNext = () => {
  router.push('/gesture')
}

onMounted(() => {
  setFormData()
})
</script>

<template>
  <div class="h-full flex flex-col">
    <el-form :model="form" label-width="140" disabled class="-mr-6 pr-6 overflow-auto">
      <div class="flex gap-4">
        <div class="flex-1 min-w-0">
          <el-form-item label="用户名：">
            <el-input v-model="form.name" />
          </el-form-item>
          <el-form-item label="利手：">
            <el-input v-model="form.dominant_hand" />
          </el-form-item>
          <el-form-item label="诊断：">
            <el-input v-model="form.diagnosis" />
          </el-form-item>
          <el-form-item label="身高：">
            <div class="flex items-center w-full">
              <el-input
                v-model="form.height_cm"
                placeholder="请输入身高"
                class="mr-2 flex-1 min-w-0"
              />
              <span class="font-bold text-#777">（ CM ）</span>
            </div>
          </el-form-item>
          <el-form-item label="体重：">
            <div class="flex items-center w-full">
              <el-input
                v-model="form.weight_kg"
                placeholder="请输入体重"
                class="mr-2 flex-1 min-w-0"
              />
              <span class="font-bold text-#777">（ KG ）</span>
            </div>
          </el-form-item>
        </div>
        <div class="flex-1 min-w-0">
          <el-form-item label="就诊号：">
            <el-input v-model="form.medical_record_number" />
          </el-form-item>
          <el-form-item label="姓名：">
            <el-input v-model="form.name" />
          </el-form-item>
          <el-form-item label="性别：">
            <el-input v-model="form.gender" />
          </el-form-item>
          <el-form-item label="出生年月：">
            <el-input v-model="form.dob" />
          </el-form-item>
          <el-form-item label="教育程度：">
            <el-input v-model="form.education_level" />
          </el-form-item>
        </div>
        <div class="flex-1 min-w-0 flex flex-col">
          <el-form-item label="联系方式：">
            <el-input v-model="form.contact" />
          </el-form-item>
          <el-form-item label="备注：" class="flex-1 min-h-0">
            <el-input v-model="form.remarks" type="textarea" class="h-full" />
          </el-form-item>
        </div>
      </div>
    </el-form>
    <div class="text-center">
      <el-button class="brand-darker-button w-15vw py-5! mr-16" @click="handleBack">返回</el-button>
      <el-button type="primary" class="w-15vw py-5!" @click="handleNext">下一步</el-button>
    </div>
  </div>
</template>

<style lang="css" scoped>
:deep(.el-textarea__inner) {
  height: 100%;
}
:deep(.el-form-item__label) {
  font-weight: 500 !important;
  font-size: 14px !important;
  color: #777;
}
:deep(.el-form-item) {
  height: 40px;
}
:deep(.el-form-item__label) {
  height: 100%;
  line-height: 40px;
}
:deep(.el-form-item__content > *) {
  height: 100%;
}
:deep(.el-input-number) {
  height: 100%;
}
:deep(.el-input) {
  height: 100%;
}
</style>
